<template>
	<div class="displacement">
		<el-card 
		:body-style="{ padding: '8px' }" 
		shadow="hover" v-for="(item, index) in activeMotor" 
		:key="item.id" 
		@click.native='toDetails(item)'
		v-cloak>
			<img :src="item.imgSrc" class="image">
			<div style="padding: 14px;">
				<span>{{ item.title }}</span>
				<p>{{ item.exp }}</p>
				<div class="bottom clearfix">
					<el-button type="text" class="button" @click='toDetails(item)'>详情</el-button>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		props: [
			'title'
		],
		data() {
			return {
				motors: [
					{
						id: 1,
						exhaust: '150cc',
						imgSrc: require('@/assets/img/aplygp150.jpg'),
						title: '阿普利亚GPR150R APR150-V ABS版',
						exp: '地表最强150',
						price: 22980,
						params: {
							length: 1950,
							w: 770,
							h: 1100,
							engine: '单缸',
							fuelTank: 15.4,
							brake: '前后碟刹',
							ABS: '支持ABS制动',
							cooling: '水冷',
							mostPowerful: '13.3kw/9750rpm',
							maximumTorque: '14N·m/7500rpm'
						}
					},
					{
						id: 2,
						exhaust: '150cc',
						imgSrc: require('@/assets/img/gsxr150.jpg'),
						title: '铃木GSXR150',
						exp: '作为GSX-R系列的入门级车型，GSX-R/S150素有精悍的轻量级跑车/街车之称，轻量化的车身配以短轴距设计，搭载一颗强劲的水冷四气门单缸发动机，这才是展现铃木真正实力的小钢炮。',
						price: 12980,
						params: {
							length: 2055,
							w: 800,
							h: 1105,
							engine: '单缸',
							fuelTank: 11,
							brake: '前后碟刹',
							ABS: 'CBS',
							cooling: '风冷',
							mostPowerful: '10.4kw/8000rpm',
							maximumTorque: '14N·m/6000rpm'
						}
					},
					{
						id: 3,
						exhaust: '250cc',
						imgSrc: require('@/assets/img/cf250.png'),
						title: '250SR赛道版',
						exp: '赛道玩家 PLAY TO WIN',
						price: 21680,
						params: {
							length: 2010,
							w: 750,
							h: 1080,
							engine: '单缸',
							fuelTank: 12,
							brake: '前后碟刹',
							ABS: '支持ABS制动',
							cooling: '水冷',
							mostPowerful: '20.5kw/9750rpm',
							maximumTorque: '22N·m/7500rpm'
						}
					},
					{
						id: 4,
						exhaust: '600cc',
						imgSrc: require('@/assets/img/s600.png'),
						title: '赛600',
						exp: '有我的地方 就是赛道，为赛而生，国内首款四缸仿赛',
						price: 50999,
						params: {
							length: 2140,
							w: 750,
							h: 1150,
							engine: '四缸',
							fuelTank: 16.4,
							brake: '前后碟刹',
							ABS: '支持ABS制动',
							cooling: '液冷',
							mostPowerful: '60.0kw/11000rpm',
							maximumTorque: '55N·m/8000rpm'
						}
					},
					{
						id: 5,
						exhaust: '250cc',
						imgSrc: require('@/assets/img/sr250abs.jpg'),
						title: '250SR ABS版',
						exp: '赛道玩家',
						price: 19980,
						params: {
							length: 2100,
							w: 750,
							h: 1080,
							engine: '单缸',
							fuelTank: 12,
							brake: '前后碟刹',
							ABS: '支持ABS制动',
							cooling: '水冷',
							mostPowerful: '20.5kw/9750rpm',
							maximumTorque: '22N·m/7500rpm'
						}
					}
				]
			}
		},
		methods: {
			toDetails(data) {
				this.$router.push({name: 'Details', params: data})
			}
		},
		computed: {
			activeMotor() {
				return this.motors.filter(element => {
					if (element.exhaust == this.title) {
						return element
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.displacement {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		&::after {
			content: '';
			flex: 1;   
		}
		[v-cloak] {
		    display: none;
		}
		.el-card {
			width: 22%;
			margin-bottom: 20px;
			&:hover {
				cursor: pointer;
			}
			.image {
				width: 100%;
				height: 100%;
			}
			div {
				span {
					font-weight: bold;
					white-space:nowrap;
					text-overflow:ellipsis;
					-webkit-text-overflow:ellipsis;
					overflow:hidden;
				}
				p {
					font-size: 12px;
					margin-top: 10px;
					display: -webkit-box;
					text-overflow: ellipsis;
					overflow: hidden;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
</style>
